<template>
  <div class="page-container">
    <example-chart ref="exampleChart" width="400px" height="300px" :chart-id="chartId" />
    <el-button type="primary" @click="changeChartData">切换图表数据</el-button>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import ExampleChart from '@/views/home/charts/ExampleChart'
export default {
  name: 'HomeIndex',
  components: {
    ExampleChart
  },
  setup() {
    const exampleChart = ref(null)
    const state = reactive({
      chartId: 'exampleChart'
    })
    // 图表默认初始值
    const chartData = {
      xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      yData: [5, 20, 36, 10, 10, 20]
    }
    const changeChartData = () => {
      const arr = []
      for (let i = 1; i <= 6; i++) {
        arr.push(Math.random() * 60 + 20 + i)
      }
      chartData.yData = arr
      initExampleChart()
    }
    // 初始化chart
    const initExampleChart = () => {
      exampleChart.value.initChart(chartData)
    }

    onMounted(() => {
      initExampleChart()
    })
    return {
      initExampleChart,
      changeChartData,
      exampleChart,
      ...toRefs(state)
    }
  }
}
</script>
